<template>
<div>
    <Row class="banner">
        <h1>异常性风险</h1>
        <h2>对贵阳市智慧消防相关信息系统的数据异常感知</h2>
    </Row>
    <Row :gutter="16" type="flex" justify="start" class="row">
        <Col span="6">
        <Card style="margin-bottom:12px;">
            <p slot="title">
                <span>数据异常率</span>
            </p>
            <div id="chart-abnormal-rate" class="chart"></div>
            <Divider />
            <span class="text">异常数据总量：{{abnormalCount}}项</span>
            <Spin fix size="large" v-show="loading.abnormal"></Spin>
        </Card>
        <Card>
            <p slot="title">
                <span>验证机制覆盖率</span>
            </p>
            <div class="chart" id="chart-validate-rate"></div>
            <Divider />
            <span class="text">未覆盖验证字段：{{invalidateCount}}个</span>
            <Spin fix size="large" v-show="loading.validate"></Spin>
        </Card>
        </Col>
        <Col span="18">
        <Card style="margin-bottom:12px;">
            <p slot="title">
                <span>异常数据一览表</span>
            </p>
            <ul class="toolbar" slot="extra">
                <li class="item">
                    <span class="text">按类型筛选</span>
                    <Select v-model="abnormalTypeName">
                        <Option v-for="(item,index) in abnormalTypeList" :value="item" :key="'at-'+index">{{item}}</Option>
                    </Select>
                </li>
                <li class="item">
                    <Input v-model="abnormalKeyword" :search="true" size="default" @on-search="renderAbnormalTable(0)" placeholder="请输入字段名称搜索" enter-button="立即搜索"></Input>
                </li>
            </ul>
            <Table :columns="abnormalTableColumns" :data="abnormalTableData"></Table>
            <Divider />
            <Page :total="abnormalPageCount" :page-size="abnormalPageSize" @on-change="renderAbnormalTable" show-evalator></Page>
            <Spin fix size="large" v-show="loading.abnormalTable"></Spin>
        </Card>
        <Card>
            <p slot="title">
                <span>未覆盖验证字段一览表</span>
            </p>
            <ul class="toolbar" slot="extra">
                <li class="item">
                    <span class="text">按系统筛选</span>
                    <Select v-model="systemName">
                        <Option v-for="(item,index) in systemList" :value="item" :key="'vt-'+index">{{item}}</Option>
                    </Select>
                </li>
                <li class="item">
                    <Input v-model="validateKeyword" :search="true" size="default" @on-search="renderValidateTable(0)" placeholder="请输入系统名称搜索" enter-button="立即搜索"></Input>
                </li>
            </ul>
            <Table :columns="validateTableColumns" :data="validateTableData"></Table>
            <Divider />
            <Page :total="validatePageCount" :page-size="validatePageSize" @on-change="renderValidateTable" show-evalator></Page>
            <Spin fix size="large" v-show="loading.validateTable"></Spin>
        </Card>
        </Col>
    </Row>
</div>
</template>

<script>
import axios from 'axios'
export default {
    name: "",
    data() {
        return {
            loading: {
                abnormal: false,
                validate: false,
                abnormalTable: false,
                validateTable: false
            },
            option: {
                abnormal: null,
                validate: null
            },
            abnormalCount: 0,
            invalidateCount: 0,
            abnormalTypeName: null,
            abnormalTypeList: [],
            systemName: null,
            systemList: [],
            abnormalKeyword: null,
            validateKeyword: null,
            abnormalPageCount: 0,
            abnormalPageSize: 10,
            validatePageCount: 0,
            validatePageSize: 10,
            abnormalTableColumns: [{
                    title: "序号",
                    key: "index",
                    align: "center",
                    width: 80
                },
                {
                    title: "产生源",
                    key: "source",
                    align: "center"
                },
                {
                    title: "数据行ID",
                    key: "rowID",
                    align: "center"
                },
                {
                    title: "所在主题库",
                    key: "databaseName",
                    align: "center"
                },
                {
                    title: "字段名",
                    key: "keyName",
                    align: "center"
                },
                {
                    title: "数据异常类型",
                    key: "typeName",
                    align: "center",
                    width: 180
                }
            ],
            abnormalTableData: [],
            validateTableColumns: [{
                    title: "序号",
                    key: "index",
                    align: "center",
                    width: 80
                },
                {
                    title: "产生源系统",
                    key: "source",
                    align: "center"
                },
                {
                    title: "所处页面",
                    key: "pageName",
                    align: "center"
                },
                {
                    title: "字段名",
                    key: "keyName",
                    align: "center"
                }
            ],
            validateTableData: []
        };
    },
    methods: {
        renderChart() {
            this.loading.abnormal = true;
            this.loading.validate = true
            this.option.abnormal = {
                legend: {
                    top: "top",
                    left: "center",
                    orient: "horizontal",
                    data: ["产生异常数据", "未产生异常的数据"],
                    textStyle: {
                        fontSize: 12
                    },
                    itemWidth: 12,
                    itemHeight: 12
                },
                tooltip: {
                    show: true,
                    trigger: "item",
                    formatter: "{a} - {b}:{c}%"
                },
                color: [this.COLORS[0], this.COLORS[7]],
                series: [{
                    name: "数据异常率",
                    type: "pie",
                    radius: ["40%", "55%"],
                    center: ["50%", "50%"],
                    data: [],
                    itemStyle: {
                        normal: {
                            shadowOffsetX: 3,
                            shadowOffsetY: 3,
                            shadowBlur: 7,
                            shadowColor: "#00000033"
                        }
                    },
                    label: {
                        normal: {
                            show: true,
                            position: "outside",
                            fontSize: 12,
                            formatter: "{b}\n{c}%"
                        }
                    }
                }]
            };
            this.option.validate = {
                legend: {
                    top: "top",
                    left: "center",
                    orient: "horizontal",
                    data: ["已覆盖验证字段", "未覆盖验证字段"],
                    textStyle: {
                        fontSize: 12
                    },
                    itemWidth: 12,
                    itemHeight: 12
                },
                tooltip: {
                    show: true,
                    trigger: "item",
                    formatter: "{a} - {b}:{c}%"
                },
                color: [this.COLORS[6], "#999"],
                series: [{
                    name: "验证覆盖率",
                    type: "pie",
                    radius: ["40%", "55%"],
                    center: ["50%", "50%"],
                    data: [],
                    itemStyle: {
                        normal: {
                            shadowOffsetX: 3,
                            shadowOffsetY: 3,
                            shadowBlur: 7,
                            shadowColor: "#00000033"
                        }
                    },
                    label: {
                        normal: {
                            show: true,
                            position: "outside",
                            fontSize: 12,
                            formatter: "{b}\n{c}%"
                        }
                    }
                }]
            };
            let params = {
                HTTEST: "test"
            };
            axios
                .get(this.URLHEAD_ODS + "getZongLan", {
                    params: params
                })
                .then(res => {
                    let json = res.data;
                    this.option.validate.series[0].data = [{
                        name: '已覆盖验证字段',
                        value: json.Data.fgl
                    }, {
                        name: '未覆盖验证字段',
                        value: 100 - json.Data.fgl
                    }]
                    this.option.abnormal.series[0].data = [{
                        name: '产生异常数据',
                        value: json.Data.ycl
                    }, {
                        name: '未产生异常的数据',
                        value: 100 - json.Data.ycl
                    }]
                    this.abnormalCount = json.Data.ycsj
                    this.invalidateCount = json.Data.wfgzd
                    this.$Crender('chart-abnormal-rate', this.option.abnormal)
                    this.$Crender('chart-validate-rate', this.option.validate)
                    this.loading.abnormal = false
                    this.loading.validate = false
                });
        },
        renderAbnormalTable(index) {
            this.loading.abnormalTable = true
            let params = {
                pageIndex: index,
                pageSize: this.abnormalPageSize,
                HTTEST: 'test',
                Title: this.abnormalKeyword
            }
            axios.get(this.URLHEAD_ODS + 'getZLInfo', {
                params: params
            }).then(res => {
                let json = res.data
                this.abnormalTableData = json.Data.map((o, i) => {
                    return {
                        index: i + 1,
                        source: `${o.TableName}系统，第${o.ID}行`,
                        rowID: o.rowid,
                        databaseName: o.Field,
                        keyName: o.Remark,
                        typeName: o.Title
                    }
                })
                this.abnormalPageCount = json.count
                this.loading.abnormalTable = false
            })
        },
        renderValidateTable(index) {
            this.loading.validateTable = true
            let params = {
                pageIndex: index,
                pageSize: this.validatePageSize,
                HTTEST: 'test',
                sysName: this.validateKeyword
            }
            axios.get(this.URLHEAD_ODS + 'getFormIsNull', {
                params: params
            }).then(res => {
                let json = res.data
                this.validateTableData = json.Data.map((o, i) => {
                    return {
                        index: i + 1,
                        source: o.sysName,
                        pageName: `${o.pathOne}-${o.pathTwo}`,
                        keyName: o.columnName
                    }
                })
                this.validatePageCount = json.count
                this.loading.validateTable = false
            })
        }
    },
    created() {
        this.abnormalTypeList = ['空值异常', '类型异常', '长度异常']
        this.systemList = ['智慧消防指挥云管理平台', '城市互联网消防远程监控系统']
    },
    mounted() {
        this.renderChart()
        this.renderAbnormalTable(0)
        this.renderValidateTable(0)
    },
};
</script>

<style lang="" scoped>
.chart {
    height: 350px;
}

.toolbar .item {
    min-width: 300px;
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
}

.toolbar .text {
    min-width: 100px;
    flex-grow: 0;
}
</style>
